<template>
  <div>
    <div ref='histograms' :style="{height:'300px',width:'100%'}"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        allLevel: ['三级甲等', '三级乙等', '三级丙等', '二级甲等', '二级乙等', '二级丙等', '一级甲等', '一级乙等', '一级丙等', '三级', '二级', '一级', '甲等', '乙等', '乙等', '无'],
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        text: '',
        value: 0,
      }
    },
    props: {
      allLevelList: {
        type: Array
      },
      datass: {
        type: Object
      }
    },
    mounted() {
      this.histogram();
    },
    methods: {
      histogram() {
        let _this = this;
        if (this.allLevelList.length > 0) {
          this.text = this.datass.name;
          this.value = this.datass.value;
          _this.allLevel = [];
          _this.data = [];
          for (let i of this.allLevelList) {
            _this.allLevel.push(i.level_grade);
            _this.data.push(i.doc_count)
          }
        } else {
          _this.allLevel = ['三级甲等', '三级乙等', '三级丙等', '二级甲等', '二级乙等', '二级丙等', '一级甲等', '一级乙等', '一级丙等', '三级', '二级', '一级', '甲等', '乙等', '乙等', '无'];
          _this.data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        }
        let option = {
          title: {
            text: this.text + '医院数为' + this.value,
            left: 'center',
          },
          tooltip: {
            show: true,
            formatter: function (params) {
              return params.name + '<br>' + '医院数为：' + params.value
            },
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: {
                interval: 0,
                rotate: 40,
                show: true,
                splitNumber: 15,
                textStyle: {
                  fontSize: 10,
                },
              },
              data: this.allLevel
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#28316d'
                }
              },
              axisLabel: {
                interval: 0,
                rotate: 0,
                show: true,
                splitNumber: 30,
                textStyle: {
                  fontSize: 12,
                }
              },
            },
          ],
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: 30,
              data: this.data,
              itemStyle: {
                normal: {
                  color: function (params) {
                    let colorList = ['#ff2600', '#ffc000', '#00ad4e', '#0073c2', '#165868', '#e76f00', '#316194', '#723761', '#00b2f1', '#4d6022', '#4b83bf', '#f9c813', '#0176c0'];
                    return colorList[params.dataIndex]
                  },
                  label: {
                    show: false,
                    position: 'top',
                    formatter: '{c}%'
                  }
                }
              }
            },
          ]
        };
        let myCharts = this.$echarts.init(this.$refs.histograms);
        myCharts.setOption(option);
        myCharts.on('click', function (params) {
          _this.$emit('histograms', params);
        });
      }
    }
  }
</script>

<style scoped>

</style>
